<template>
	<view class="chat-list">
		<view class="friend-list">
			<!-- 系统通知 -->
			<view class="item" v-if="noticeList.length" @click="toNoticePage">
				<view class="avatar">
					<view class="badge" v-show="totalNotice.length > 0">
						<uv-badge type="error" max="99" :value="totalNotice.length"></uv-badge>
					</view>
					<image src="../../static/img/notice.png" mode="aspectFill"></image>
				</view>
				<view class="wrap">
					<view class="name">系统通知</view>
					<view class="message" v-if="userInfo.role === 'company'">
						<text v-if="lastNotice.content">{{ lastNotice.content }}</text>
						<text v-else>{{ lastNotice.nickName }}向你投递了一份简历，请前往用户中心中查收</text>
					</view>
					<view class="message" v-else>
						{{ lastNotice.nickName }}向你发起了面试邀请，请前往用户中心查收
					</view>
				</view>
				<view class="time">{{ timeFormat(lastNotice.createdAt) }}</view>
			</view>
			<!-- 好友信息 -->
			<template v-for="item in friendGather">
				<view class="item" v-if="item.messages.length" :key="item.friendId" @click="toPage(item.friendId)">
					<view class="avatar">
						<view class="badge" v-show="totalReadGather(item.friendId) !== 0">
							<uv-badge type="error" max="99" :value="totalReadGather(item.friendId)"></uv-badge>
						</view>
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="wrap">
						<view class="name">{{ item.nickname }}</view>
						<view class="message">{{ item.messages[item.messages.length - 1].content }}</view>
					</view>
					<view class="time">{{ timeFormat(item.messages[item.messages.length - 1].createdAt) }}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {};
	},
	computed: {
		...mapState(['userInfo', 'friendGather', 'noticeList', 'unReadGather', 'badge']),
		// 计算未读系统通知
		totalNotice() {
			return this.noticeList.filter(item => item.status === 0);
		},
		// 最后一条系统通知
		lastNotice() {
			if (this.noticeList.length) {
				return this.noticeList[this.noticeList.length - 1];
			}
			return null;
		}
	},
	onShow() {
		const token = uni.getStorageSync('token');
		if (!token) {
			uni.navigateTo({ url: '/pages/user/login/index' });
			return;
		}
		// 移除标签栏的徽章
		if (this.badge === 0) {
			uni.removeTabBarBadge({ index: 2 });
		}
	},
	methods: {
		// 格式化时间
		timeFormat(value) {
			return uni.$uv.timeFormat(value, 'mm/dd');
		},
		// 计算未读详细
		totalReadGather(friendId) {
			return this.unReadGather[friendId] || 0;
		},
		// 跳转到系统通知
		toNoticePage() {
			uni.navigateTo({ url: '/pages/chat/notice' });
		},
		toPage(friendId) {
			this.$store.commit('SET_ACTIVE_ROOM', friendId);
			uni.navigateTo({ url: `/pages/chat/chat` });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.friend-list {
	padding: 0 30rpx;
	.avatar {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 30rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 100rpx;
		}
		.badge {
			position: absolute;
			top: 0;
			right: -20rpx;
			z-index: 10;
		}
	}
	.item {
		position: relative;
		display: flex;
		margin: 32rpx 0;
		.wrap {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			.name {
				font-size: 34rpx;
			}
			.message {
				width: 500rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #606266;
			}
		}
		.time {
			position: absolute;
			top: 16rpx;
			right: 0;
		}
	}
}
</style>
